<template>
  <div class="layout-pd">
    <zh-header-toolbar extra="">
      <zh-button buttonType="add" @click="openSingleLinkProcess" :disabled="state.singleLinkProcessDisabled">单环节流程设计</zh-button>
      <zh-button
        style="margin-left: 8px"
        icon="ele-Share"
        type="primary"
        @click="openProcessOperationType"
        >流程分配
      </zh-button>
      <zh-button style="margin-left: 8px" button-type="edit" @click="openDesign" :disabled="state.processDisabled">
        流程设计
      </zh-button>
    </zh-header-toolbar>
    <zh-space style="padding-top: 10px">
      <zh-card title="">
        <zh-form ref="processForm" :model="state.queryParam">
          <zh-form-input
            prop="processName"
            label="流程名称"
            placeholder="支持模糊查询"
            v-model="state.queryParam.processName"
          ></zh-form-input>
          <zh-form-select
            prop="operationType"
            label="业务类型"
            placeholder="单选"
            :options="state.dictData.OPERATIONTYPE"
            v-model="state.queryParam.operationType"
          ></zh-form-select>
          <template v-if="state.advanced">
            <zh-form-select
              prop="processState"
              label="流程状态"
              placeholder="单选"
              :options="[
                { dictKey: 0, dictValue: '禁用' },
                { dictKey: 1, dictValue: '启用' },
              ]"
              v-model="state.queryParam.processState"
            ></zh-form-select>
          </template>
          <zh-form-query
            v-model="state.advanced"
            :form-ref="processForm"
            :table-ref="processTable"
          ></zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
        ref="processTable"
        title=""
        funcCode="flowLongDeploy001"
        :columns="state.tableColumn"
        @radio-change="radioChangeEvent"
        :radio-config="{ trigger: 'row' }"
        :disabled="false"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <template #status_edit="{ row }">
          <el-switch
            v-model="row.processState"
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            size="large"
            @change="onStatusChange(row)"
            :width="60"
          ></el-switch>
        </template>
      </zh-table>
    </zh-space>

    <zh-dialog
      :title="state.modalTitle"
      width="50%"
      v-model="state.visible"
      @confirm="openProcessNameDialog"
    >
      <flow-long ref="flowLongPage" :processData="state.selectProcessData" />
    </zh-dialog>

    <zh-dialog
      title="请填写流程名称"
      width="30%"
      v-model="state.processNameVisible"
      @confirm="handleProcessData"
    >
      <zh-form :model="state.processData">
        <zh-form-input
          :span="24"
          prop="processKey"
          label="流程key"
          v-model="state.processData.key"
          :disabled="!!state.processData.processId"
        ></zh-form-input>
        <zh-form-input
          :span="24"
          prop="processName"
          label="流程名称"
          v-model="state.processData.name"
        ></zh-form-input>
      </zh-form>
    </zh-dialog>

    <zh-dialog
      title="请关联流程业务"
      width="30%"
      v-model="state.processOperationTypeVisible"
      @confirm="handleProcessOperationType"
    >
      <zh-form :model="state.processOtherData" label-width="150px">
        <zh-form-select
          prop="operationType"
          label="业务类型"
          placeholder="单选"
          :span="24"
          :options="state.dictData.OPERATIONTYPE"
          v-model="state.processOtherData.operationType"
        ></zh-form-select>
        <zh-form-select
            prop="routerId"
            label="业务操作模块路由"
            placeholder="单选"
            :span="24"
            :options="state.routerList"
            v-model="state.processOtherData.routerId"
        ></zh-form-select>
        <zh-form-select
            prop="businessScope"
            label="业务范围"
            placeholder="单选"
            :span="24"
            :options="[{dictKey: 0,dictValue: 'pc和app'},
            {dictKey: 1,dictValue: 'pc'},
            {dictKey: 2,dictValue: 'app'}]"
            v-model="state.processOtherData.businessScope"
        ></zh-form-select>
        <zh-form-select
            prop="classfiy"
            label="分类"
            placeholder="单选"
            :span="24"
            :options="state.dictData.PROCESSCLASSFIY"
            v-model="state.processOtherData.classfiy"
        ></zh-form-select>
      </zh-form>
    </zh-dialog>

    <zh-dialog
        title="创建单环节流程"
        width="30%"
        v-model="state.singleLinkProcessVisible"
        @confirm="handleSingleLinkProcess"
    >
      <zh-form :model="state.singleLinkProcessVO" label-width="150px">
        <zh-form-input
            :span="24"
            prop="processKey"
            label="流程key"
            v-model="state.singleLinkProcessVO.processKey"
        ></zh-form-input>
        <zh-form-input
            :span="24"
            prop="processName"
            label="流程名称"
            v-model="state.singleLinkProcessVO.processName"
        ></zh-form-input>
        <zh-form-input
            :span="24"
            prop="formUrl"
            label="pc页面还原url地址"
            v-model="state.singleLinkProcessVO.nodeConfig.childNode.formUrl"
        ></zh-form-input>
        <zh-form-input
            :span="24"
            prop="appFormUrl"
            label="app页面还原url地址"
            v-model="state.singleLinkProcessVO.nodeConfig.childNode.appFormUrl"
        ></zh-form-input>
        <zh-form-input
            :span="24"
            prop="funcCode"
            label="业务结束执行方法"
            v-model="state.singleLinkProcessVO.nodeConfig.childNode.funcCode"
        ></zh-form-input>
      </zh-form>
    </zh-dialog>
  </div>
</template>

<script lang="ts" setup name="flowLong">
import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
import FlowLong from "@/views/system/workflow/flowLong/component/flowLong.vue";
//------------------定义子组件---------------------------
const processTable = ref<any>({});
const flowLongPage = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
  singleLinkProcessDisabled: false,
  processDisabled: false,
  routerList: [],
  dictData: {} as any,
  visible: false,
  processNameVisible: false,
  form: null,
  processData: {} as any,
  // 高级搜索 展开/关闭
  advanced: false,
  // 查询参数
  queryParam: {} as any,
  // 表头
  loading: false,
  tablePage: {
    total: 0,
    currentPage: 1,
    pageNum: 1,
    pageSize: 20,
  },
  selectProcessData: undefined,
  tableColumn: [
    {
      type: "radio",
      width: 50,
      fixed: "left",
      align: "center",
    },
    { type: "seq", width: 80, fixed: "left", align: "center", title: "序号" },
    { field: "processKey", title: "流程key", align: "center", fixed: "left", width: 100 },
    {
      field: "processName",
      title: "流程名称",
      align: "center",
      fixed: "left",
      width: 200,
    },
    {
      field: "processTypeName",
      title: "流程类别",
      align: "center",
      width: 100,
    },
    {
      field: "processState",
      title: "状态",
      align: "center",
      editRender: {},
      slots: {
        // 使用插槽模板渲染
        default: "status_edit",
        edit: "status_edit",
      },
      width: 80,
    },
    { field: "operationType", title: "业务类型编码", align: "center", width: 200 },
    { field: "operationTypeName", title: "业务类型", align: "center", width: 220 },
    { field: "routerTitle", title: "业务操作模块", align: "center", width: 150 },
    { field: "processVersion", title: "流程版本", align: "center", width: 80 },
    { field: "createBy", title: "创建人", align: "center" },
  ],
  tableData: [],
  selectRow: null as any,
  modalTitle: "操作",
  processId: null as any,
  processOperationTypeVisible: false,
  statusData: [
    { dictKey: "1", dictValue: "启用" },
    { dictKey: "0", dictValue: "禁用" },
  ],
  singleLinkProcessVisible: false,
  singleLinkProcessVO: {
    key: "",
    processKey: "",
    name: "",
    processName: "",
    processType: 1,
    nodeConfig: {
      type: 0,
      nodeId: "1",
      nodeName: "",
      taskActorConfigForNextStep: [],
      childNode: {
        type: 1,
        nodeId: "2",
        nodeName: "单环节流程-审核",
        formUrl: "",
        appFormUrl: "",
        funcCode: "",
        formMode: 1,
        taskActorConfigForNextStep: [],
      }
    }
  },
  processOtherData: {
    processId: "",
    operationType: "",
    routerId: "",
    businessScope: "",
    classfiy: "",
  }
});

//------------------定义调用方法-------------------------
function openSingleLinkProcess() {
  state.singleLinkProcessVisible = true;
}
function handleSingleLinkProcess() {
  state.singleLinkProcessVO.key = state.singleLinkProcessVO.processKey;
  state.singleLinkProcessVO.name = state.singleLinkProcessVO.processName;
  state.singleLinkProcessVO.nodeConfig.nodeName = state.singleLinkProcessVO.processName + "-发起";
  $api.common.send
      .post("flowLongDeploy009", {singleLinkProcessVO: state.singleLinkProcessVO})
      .then(() => {
        $messageBox.success("单环节流程创建成功", "提示");
        state.singleLinkProcessVisible = false;
        refreshList();
        state.singleLinkProcessVO = {
          key: "",
          processKey: "",
          name: "",
          processName: "",
          processType: 1,
          nodeConfig: {
            type: 0,
            nodeId: "1",
            nodeName: "",
            taskActorConfigForNextStep: [],
            childNode: {
              type: 1,
              nodeId: "2",
              nodeName: "单环节流程-审核",
              formUrl: "",
              appFormUrl: "",
              funcCode: "",
              formMode: 1,
              taskActorConfigForNextStep: [],
            }
          }
        }
      })
      .catch(() => {});
}
function radioChangeEvent({ row }) {
  state.processId = row.id;
  state.selectRow = row;
  state.selectProcessData = {};
  state.singleLinkProcessVO = {};
  if(state.selectRow.processType === 1){
    state.singleLinkProcessDisabled = false;
    state.processDisabled = true;
    state.singleLinkProcessVO = JSON.parse(row.modelContent);
  }else {
    state.singleLinkProcessDisabled = true;
    state.processDisabled = false;
    state.selectProcessData = JSON.parse(row.modelContent);
  }
  state.processOtherData.processId = row.id;
  state.processOtherData.operationType = row.operationType;
  state.processOtherData.routerId = row.routerId;
  state.processOtherData.businessScope = row.businessScope;
  state.processOtherData.classfiy = row.classfiy;
}
function clearRadioRowEevnt() {
  state.selectRow = null;
  processTable.value.clearRadioRow();
  state.selectProcessData = undefined;
  state.processId = undefined;
}
function findProcessList() {
  processTable.value.query(state.queryParam).then((tableData) => {
    console.log(tableData);
  });
}
function refreshList() {
  processTable.value.refresh(state.queryParam);
}
// 启用/禁用用户
function onStatusChange(row) {
  const params = {
    processId: row.id,
    processState: row.processState,
  };
  let text = "禁用";
  if (params.processState === 1) {
    text = "启用";
  }
  $api.common.send
    .post("flowLongDeploy003", params)
    .then(() => {
      $messageBox.success(text + "成功", "提示");
    })
    .catch(() => {});
}
function openDesign() {
  state.modalTitle = "流程设计";
  state.visible = true;
}
function openProcessNameDialog() {
  const processData = flowLongPage.value.getData();
  if (processData) {
    state.processData = processData;
    state.processNameVisible = true;
  }
}
function handleProcessData() {
  $api.common.send
    .post("flowLongDeploy002", {
      jsonString: JSON.stringify(state.processData),
      flag: state.processId ? "edit" : "save",
    })
    .then(() => {
      $messageBox.success("流程创建成功", "提示");
      state.processNameVisible = false;
      state.visible = false;
      refreshList();
    })
    .catch(() => {});
}
function handleProcessOperationType() {
  $api.common.send
    .post("flowLongDeploy004", {
      processId: state.processOtherData.processId,
      operationType: state.processOtherData.operationType,
      routerId: state.processOtherData.routerId,
      businessScope: state.processOtherData.businessScope,
      classfiy: state.processOtherData.classfiy,
    })
    .then(() => {
      $messageBox.success("流程关联业务成功", "提示");
      state.processOperationTypeVisible = false;
      refreshList();
    })
    .catch(() => {});
}
function openProcessOperationType() {
  if (state.processId) {
    if (state.selectRow) {
      if (state.selectRow.status === 0) {
        $messageBox.warning("该流程已禁用，不能操作", "提示");
        return;
      }
      // 打开资源授权页面
      state.processOperationTypeVisible = true;
    } else {
      $messageBox.warning("请先选择需要操作的流程", "提示");
    }
  } else {
    $messageBox.warning("请先选择需要操作的流程", "提示");
  }
}
function handleCurrentChange(row) {}

//------------------初始化------------------------------

// 数据字典初始化
const initDict = () => {
  const params = {
    dictFields: "OPERATIONTYPE,PROCESSCLASSFIY",
  };
  $api.common.getBatchDict.post(params).then((res) => {
    state.dictData = res.result;
  });
  $api.common.send
      .post('flowLongDeploy005', {})
      .then((res) => {
        state.routerList = res.result
      })
      .catch(() => {});
};

onMounted(() => {
  nextTick(() => {
    initDict();
    findProcessList();
  });
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  overflow-x: auto !important;
}
</style>
